<template>
  <div class="examples-page">
    <h1 class="page-title">使用示例</h1>
    <p class="page-description">
      以下是一些常见的使用场景和生成结果示例，帮助您了解AI代码生成器的能力。
    </p>
    <div class="examples-list">
      <!-- Python数据分析示例 -->
      <div class="example-item">
        <h3>Python数据分析</h3>
        <div class="example-content">
          <div class="example-prompt">
            <strong>提示:</strong> 生成一个使用pandas读取CSV文件并进行简单数据分析的Python代码
          </div>
          <div class="example-code">
            <pre><code>{{ pythonExampleCode }}</code></pre>
          </div>
        </div>
      </div>
      
      <!-- JavaScript表单验证示例 -->
      <div class="example-item">
        <h3>JavaScript表单验证</h3>
        <div class="example-content">
          <div class="example-prompt">
            <strong>提示:</strong> 创建一个简单的表单验证JavaScript函数
          </div>
          <div class="example-code">
            <pre><code>{{ jsExampleCode }}</code></pre>
          </div>
        </div>
      </div>
      
      <!-- Vue组件示例 -->
      <div class="example-item">
        <h3>Vue组件示例</h3>
        <div class="example-content">
          <div class="example-prompt">
            <strong>提示:</strong> 创建一个简单的Vue 3计数器组件
          </div>
          <div class="example-code">
            <pre><code>{{ vueExampleCode }}</code></pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 简单的示例代码定义，避免复杂的嵌套结构
const pythonExampleCode = `import pandas as pd
import matplotlib.pyplot as plt

# 读取CSV文件
df = pd.read_csv('data.csv')

# 基本信息
print("数据形状:", df.shape)
print("\n前5行数据:")
print(df.head())

# 基本统计信息
print("\n基本统计:")
print(df.describe())

# 缺失值检查
print("\n缺失值数量:")
print(df.isnull().sum())

# 简单可视化
df['age'].hist()
plt.title('Age Distribution')
plt.xlabel('Age')
plt.ylabel('Frequency')
plt.show()`;

const jsExampleCode = `function validateForm(formData) {
  const errors = {}
  
  // 检查姓名
  if (!formData.name || formData.name.trim() === '') {
    errors.name = '姓名不能为空'
  }
  
  // 检查邮箱
  const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/
  if (!formData.email) {
    errors.email = '邮箱不能为空'
  } else if (!emailRegex.test(formData.email)) {
    errors.email = '请输入有效的邮箱地址'
  }
  
  // 检查年龄
  if (!formData.age) {
    errors.age = '年龄不能为空'
  } else if (isNaN(formData.age) || formData.age < 18) {
    errors.age = '年龄必须大于18岁'
  }
  
  return {
    isValid: Object.keys(errors).length === 0,
    errors
  }
}

// 使用示例
const formData = {
  name: '张三',
  email: 'zhangsan@example.com',
  age: 25
}

const validationResult = validateForm(formData)
if (!validationResult.isValid) {
  console.error('表单验证失败:', validationResult.errors)
} else {
  console.log('表单验证通过')
}`;
const vueExampleCode = `<template>\n  <div class="counter">\n    <h2>计数器</h2>\n    <p>当前值: &#123;&#123; count &#125;&#125;</p>\n    <button @click="increment">增加</button>\n    <button @click="decrement">减少</button>\n    <button @click="reset">重置</button>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\n\n// 定义计数状态\nconst count = ref(0)\n\n// 增加计数\nfunction increment() {\n  count.value++\n}\n\n// 减少计数\nfunction decrement() {\n  if (count.value > 0) {\n    count.value--\n  }\n}\n\n// 重置计数\nfunction reset() {\n  count.value = 0\n}\n<\/script>\n\n<style scoped>\n.counter {\n  text-align: center;\n  padding: 20px;\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  width: 300px;\n  margin: 0 auto;\n}\n\nh2 {\n  color: #1890ff;\n}\n\np {\n  font-size: 24px;\n  margin: 20px 0;\n}\n\nbutton {\n  padding: 8px 16px;\n  margin: 0 5px;\n  cursor: pointer;\n  background-color: #f0f0f0;\n  border: none;\n  border-radius: 4px;\n}\n\nbutton:hover {\n  background-color: #e0e0e0;\n}\n<\/style>`;
</script>

<style scoped>
.examples-page {
  padding: 40px 20px;
}

.page-title {
  font-size: 2.5em;
  color: #1890ff;
  text-align: center;
  margin-bottom: 20px;
}

.page-description {
  text-align: center;
  color: #666666;
  font-size: 1.1em;
  margin-bottom: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.examples-list {
  max-width: 900px;
  margin: 0 auto;
}

.example-item {
  margin-bottom: 40px;
  padding: 25px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.example-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.example-item h3 {
  color: #1890ff;
  margin-bottom: 15px;
  font-size: 1.5em;
}

.example-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.example-prompt {
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 6px;
  padding: 15px;
  color: #389e0d;
}

.example-code {
  background-color: #f6f8fa;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow-x: auto;
}

.example-code pre {
  margin: 0;
  padding: 15px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.95em;
  line-height: 1.5;
}

.example-code code {
  color: #333;
  white-space: pre-wrap;
}

@media (max-width: 768px) {
  .examples-page {
    padding: 20px 15px;
  }
  
  .page-title {
    font-size: 2em;
  }
  
  .example-item {
    padding: 20px;
  }
  
  .example-code pre {
    padding: 10px;
    font-size: 0.9em;
  }
}
</style>